<template>
	<div class="photo">
		<div class="photo-top">
			<span>摄影</span><span><img src="../assets/images/p9.png"/></span>
			<p>photography</p>
			<h1>精心定制摄影服务 打造视觉大片</h1>
		</div>
		<div class="photo-img"><img src="../assets/images/p10.png" alt="" /></div>
		<div class="photo-pc">
			<ul>
				<li>
					<div><img src="../assets/images/p11.png" alt="" /></div>
					<p>服装摄影</p>
				</li>
				<li>
					<div><img src="../assets/images/p12.png" alt="" /></div>
					<p>美妆摄影</p>
				</li>
				<li>
					<div><img src="../assets/images/p13.png" alt="" /></div>
					<p>皮具摄影</p>
				</li>
				<li>
					<div><img src="../assets/images/p14.png" alt="" /></div>
					<p>产品摄影</p>
				</li>
				<li>
					<div><img src="../assets/images/p15.png" alt="" /></div>
					<p>食品摄影</p>
				</li>
				<li>
					<div><img src="../assets/images/p16.png" alt="" /></div>
					<p>建筑摄影</p>
				</li>
			</ul>
		</div>
		<hr/>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	.photo{
		margin-top: 20px;
		.photo-top{
			width:55%;
			margin:0 auto;
			text-align: center;
			span:first-child{
				font-size: 30px;
				color: #333333;
				text-align: center;
				vertical-align: middle;
			}
			span:nth-child(2){
				width: 29px;
				height: 29px;
				overflow: hidden;
				margin-left: 5px;
				display: inline-block;
				vertical-align: middle;
				img{
					width: 100%;
				}
			}
			p{
				font-size: 23px;
				color: #999999;
			}
			h1{
				font-size: 18px;
				color: #666666;
				margin-top: 18px;
				white-space: nowrap;
			}
		}
	}
	.photo-img{
		height: 223px;
		overflow: hidden;
		padding: 10px;
		img{
			width: 100%;
		}
	}
	.photo-pc{
		width: 100%;
		margin-top: 20px;
		ul{
			display: flex;
			justify-content: space-around;
			width: 100%;
			flex-wrap: wrap;
			li{
				width: 45%;
				font-size: 0;
				margin-bottom: 25px;
				div{
					height: 122px;
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				p{
					font-size: 15px;
					color: #454545;
					text-align: center;
					margin-top: 10px;
				}
			}
		}
	}
	hr{
		border: 3px solid #e5e5e5;
	}
</style>